<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <button id="look">查看学生信息列表</button>

    <hr>
    年龄大于多少的学生：<input type="text" id="inp" name="" id="">

    <script>
        //功能1：点击按钮获取所有的学生信息
        //后端返回数据说明：
        //接口：get请求 url=http://localhost:3000/list
        $("#look").click(function(){
            $.ajax({
                type:'get',
                url:'http://localhost:3000/list',
                dataType:'json',
                success:res=>{
                    console.log(res);
                }
            })
        })
   
        //功能2： 搜索回车 满足年龄的学生信息
        $('#inp').keyup(function(e){
            //键盘抬起获取输入的值
            // let val = $(this).val();
            // console.log(val);
            //判断触发回车键
            // console.log(e.keyCode);
            if(e.keyCode ===13){
                // console.log('回车了');
                let val = $(this).val();
                $.ajax({
                    type:'get',
                    url:'http://localhost:3000/list',
                    data:{
                        age:val
                    },
                    dataType:'json',
                    success:res=>{
                        console.log(res);
                    }
                })
            }

        })
   </script>
</body>
</html>